<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-24 14:56:49
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 15:01:04
-->
<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="修改比例"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="抽成比例"
            name="name"
            :rules="[{ required: true, message: '请输入抽成比例' }]"
          >
            <a-input-number
              v-model:value="formData.serviceCharge"
              type="number"
              max="100"
              min="0"
              :precision="0"
              placeholder="输入抽成比例"
            >
              <template #addonAfter> <span>% </span> </template>
            </a-input-number>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
            <div class="btns center">
              <a-space>
                <a-button @click="handleCloseDialog">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
              </a-space>
            </div>
          </a-form-item>
        </a-form>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { catalogSave } from "@/api/goodConfig.js";
import { message } from "ant-design-vue";
const formData = ref({
  name: undefined,
});
const formRef = ref(null);
const modalOpen = ref(false);
const open = (record) => {
  modalOpen.value = true;
  formData.value = Object.assign({}, record);
};
function handleCloseDialog() {
  modalOpen.value = false;
}
const emits = defineEmits(["refreshList"]);
const handleSubmit = async (res) => {
  formRef.value.validate().then((res) => {
    catalogSave(formData.value).then((result) => {
      if (result.code == 200) {
        message.success("保存成功");
        modalOpen.value = false;
        emits("refreshList");
      }
    });
  });
};
defineExpose({ modalOpen, open });
</script>
